<%@ include file="../common/top.jsp"%>
<%@ page import="java.util.UUID" %>


<script  src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.2.1/jquery.min.js"></script>
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>


<div id="BackLink"><a href="MainForm">
    Return to Main Menu
</a></div>

<div id="Catalog">

    <div id="Cart">

        <h2>Shopping Cart</h2>

        <form action="updateCart" method="post">
            <table>
                <tr>
                    <th><b>Item ID</b></th>
                    <th><b>Product ID</b></th>
                    <th><b>Description</b></th>
                    <th><b>In Stock?</b></th>
                    <th><b>Quantity</b></th>
                    <th><b>List Price</b></th>
                    <th><b>Total Cost</b></th>
                    <th>&nbsp;</th>
                </tr>

                <c:if test="${sessionScope.cart.numberOfItems == 0}">
                    <tr>
                        <td colspan="8"><b>Your cart is empty.</b></td>
                    </tr>
                </c:if>

                <c:forEach var="cartItem" items="${sessionScope.cart.cartItems}">
                    <tr>
                        <td>
                            <a href="itemForm?itemId=${cartItem.item.itemId}">${cartItem.item.itemId}</a>
                        </td>
                        <td>${cartItem.item.product.productId}</td>
                        <td>${cartItem.item.attribute1} ${cartItem.item.attribute2}
                                ${cartItem.item.attribute3} ${cartItem.item.attribute4}
                                ${cartItem.item.attribute5} ${cartItem.item.product.name}</td>
                        <td>${cartItem.inStock}</td>
                        <td>
                            <input type="text" name="${cartItem.item.itemId}" value="${cartItem.quantity}">
                        </td>
                        <td><fmt:formatNumber value="${cartItem.item.listPrice}" pattern="$#,##0.00" /></td>
                        <td><span id="${cartItem.item.itemId}"><fmt:formatNumber value="${cartItem.total}" pattern="$#,##0.00"/></span></td>
                        <td>
                            <a href="javascript:void(0)" onclick="confirmRemove('${cartItem.item.itemId}')" class="Button">Remove</a>
                        </td>
                    </tr>
                </c:forEach>
                <tr>
                    <td colspan="7">
                        Sub Total: <span id="subTotal"><fmt:formatNumber value="${sessionScope.cart.subTotal}" pattern="$#,##0.00"/></span>
                        <input type="submit" value="Update Cart">
                    </td>
                    <td>&nbsp;</td>
                </tr>
            </table>
        </form>

        <c:if test="${sessionScope.cart.numberOfItems > 0}">
            <a href="newOrderForm" class="Button">Proceed to Checkout</a>
        </c:if>
    </div>

    <div id="MyList">
        <c:if test="${sessionScope.loginAccount != null}">
                <c:if test="${!empty sessionScope.loginAccount.listOption}">
                    <%@ include file="IncludeMylist.jsp"%>
                </c:if>
        </c:if>
    </div>

    <div id="Separator">&nbsp;</div>
</div>


<script type="text/javascript">
    // 获取包含表单的元素
    const form = document.querySelector('form[action="updateCart"]');
    const inputs = form.querySelectorAll('input[type="text"]');

    // 为每个输入字段添加事件监听器
    inputs.forEach(input => {
        input.addEventListener('blur', function() {

            const itemID = input.name;
            const quantity = input.value;

            $.ajax({
                url : "updateCartInfo",  //发送请求
                type : "post",
                data : {
                    "itemId" : itemID,
                    "quantity" : quantity
                },
                success: function(response) {
                    let spanElement = $("#"+itemID);
                    spanElement.text(response.itemTotal);
                    let spanElement2 = $("#subTotal");
                    spanElement2.text(response.subTotal);
                }
            });


        });
    });

    function confirmRemove(itemId) {
        if (confirm('Are you sure you want to remove this item from your cart?')) {
            window.location.href = 'removeCartItem?workingItemId=' + itemId;
            $.ajax({
                url : "updateCartInfo",  //发送请求
                type : "post",
                data : {
                }
            });
        }
    }
</script>

<%@ include file="../common/bottom.jsp"%>